<template>
  <div class="page-classifyList">
    <filter-view @update-list="() => getClassifyList()" />
    <!--
      :tableFormRef="tableFormRef"
       <a-form ref="tableFormRef" :model="statusState">
      <a-form-item-rest
        name="classifyList"
        :rules="{
          required: true
        }"
      > -->
    <a-table
      ref="tableRef"
      id="sortTable"
      :row-selection="{
      selectedRowKeys: statusState.selectedRowKeys,
      checkStrictly: false,
      getCheckboxProps: (record: ClassifyListData) => {
        return { disabled: record.level === 1 && record?.subcateg?.length > 0 }
      },
      onChange: onSelectChange
    }"
      :expandedRowKeys="openRowKeys"
      @expandedRowsChange="expandedRowsChangeFunc"
      :expandRowByClick="false"
      row-key="id"
      :key="tableKey"
      :columns="columns"
      childrenColumnName="subcateg"
      :rowClassName="(record: ClassifyListData) => {
        return record.level === 2 ? 'childBg' : ''
      }"
      :indentSize="0"
      :pagination="false"
      :data-source="statusState.classifyList"
      :loading="state.loading"
      :scroll="{ x: 1400 }"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
          <span @click="handleOpenKeys">
            <plus-square-outlined v-if="!isOpen" />
            <minus-square-outlined v-else />
            {{ column.title }}
          </span>
        </template>
      </template>
      <!-- <template #expandedRowRender="{ record }">
        <p style="margin: 0">
          {{  record.classify  }}
        </p>
      </template> -->
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'order'">
          {{ record.order }}
        </template>
        <template v-else-if="column.key === 'categ_position'">
          <span v-if="record.categ_position">
            {{ getPosition(record.categ_position) }}
          </span>
          <span v-else>-</span>
        </template>
        <template v-else-if="column.key === 'video_count'">
          <span>
            {{ formatNumber(record.video_count) }}
          </span>
        </template>
        <template v-else-if="column.key === 'name'">
          <span v-show="!statusState.isEdit">
            <a-tooltip placement="top" color="#fff">
              <template #title>
                {{ record.name }}
              </template>
              <div class="ellipsis-text">{{ record.name }}</div>
            </a-tooltip>
          </span>

          <!--
                 <a-form-item :name="['classifyList', index, 'name']" :rules="{ required: true, message: '请输入分类' }">
                </a-form-item>
          -->

          <a-input
            v-show="statusState.isEdit"
            v-model:value="record.name"
            :maxlength="30"
            class="w-[170px]"
            placeholder="请输入分类"
          />
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            <a-switch
              v-model:checked="record.status"
              :checkedValue="1"
              :unCheckedValue="2"
              @change="(checked: any) => editStatus(checked, record)"
            />
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a class="basicColor" @click="addSonClassify(record)" v-if="record.level === 1">
              添加子类
              <a-divider type="vertical" />
            </a>
            <a class="basicColor" @click="updateClass(record)"
              >编辑
              <a-divider type="vertical" />
            </a>
            <a class="basicColor" @click="deleteClass(record)" v-if="!isCheck(record)"> 删除 </a>
            <a v-else @click="() => message.error('删除失败，分类下有子类时不允许被删除')">删除</a>
          </span>
        </template>
      </template>
      <!-- 删除对话框 -->
    </a-table>
    <!--
        </a-form-item-rest>
    </a-form>
     -->
    <modal-view
      title="提示"
      v-model:visible="deleteVisible"
      okText="确定"
      cancelText="取消"
      :width="458"
      @confirm="deleteConfirm"
      @cancel="deleteCancel"
    >
      <span>确定要删除该分类吗</span>
    </modal-view>
    <!-- 新建分类对话框 -->
    <modal-view
      :title="statusState.isAddClass ? '新建分类' : '编辑分类'"
      v-model:visible="statusState.addClassify"
      okText="确定"
      cancelText="取消"
      :width="511"
      :afterClose="afterCloseEdit"
      @confirm="addConfirm"
      @cancel="addCancel"
    >
      <a-form ref="formRef" :model="addFormState" :rules="addFormRules">
        <a-form-item label="分类名称" name="categ_name">
          <a-input
            v-model:value.trim="addFormState.categ_name"
            :maxlength="30"
            class="w-full"
            placeholder="请输入分类名称"
          />
        </a-form-item>
        <a-form-item label="展示位置" name="categ_position">
          <a-checkbox-group v-model:value="addFormState.categ_position">
            <a-checkbox :value="1">顶部分类</a-checkbox>
            <a-checkbox :value="2">首页推荐</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="序号" name="categ_order">
          <a-input-number
            v-model:value.trim="addFormState.categ_order"
            :min="0"
            :max="999999"
            placeholder="请输入序号"
            class="w-full"
          />
        </a-form-item>
        <a-form-item label="状态" name="categ_status">
          <a-radio-group v-model:value="addFormState.categ_status">
            <a-radio :value="1" class="mr-[80px]">启用</a-radio>
            <a-radio :value="2">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </modal-view>
    <!-- 添加子类对话框 -->
    <modal-view
      :title="statusState.isAddSubClass ? '添加子类' : '编辑子类'"
      v-model:visible="statusState.addSubClassify"
      okText="确定"
      cancelText="取消"
      :width="511"
      :afterClose="afterCloseSubEdit"
      @confirm="addSubConfirm"
      @cancel="addSubCancel"
    >
      <a-form ref="subFormRef" :model="addSubFormState" :rules="addSubFormRules">
        <a-form-item label="所属分类" name="categ_id">
          <a-select
            v-model:value="addSubFormState.categ_id"
            placeholder="请选择所属分类"
            :disabled="statusState.isAddSubClass ? false : true"
            class="w-full"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <a-select-option :value="item.id" v-for="item in classFilterList" :key="item.id"
              >{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="子类名称" name="subcateg_name">
          <a-textarea
            v-model:value.trim="addSubFormState.subcateg_name"
            :maxlength="statusState.isAddSubClass ? 1000 : 30"
            placeholder="请输入子类名称，批量添加多个子类使用逗号“,”分隔"
            :rows="5"
            class="w-full"
          />
        </a-form-item>
        <a-form-item label="状态" name="subcateg_status">
          <a-radio-group v-model:value="addSubFormState.subcateg_status">
            <a-radio :value="1" class="mr-[80px]">启用</a-radio>
            <a-radio :value="2">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="序号" name="subcateg_order">
          <a-input-number
            v-model:value.trim="addSubFormState.subcateg_order"
            :min="0"
            :max="999999"
            placeholder="请输入序号"
            class="w-full"
          />
        </a-form-item>
      </a-form>
    </modal-view>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue'
import { message } from 'ant-design-vue'
import { formatNumber } from '@/utils/format'
import Sortable from 'sortablejs'
import FilterView from './components/FilterView.vue'
import { SHOW_POSITION, column } from './dataSource'
import type { ClassifyListData } from '@/types/site/classifyList'
import { statusState, classifyState, type ICopyList } from './state'
import ModalView from '@/components/components/modal/ModalView.vue'
import { useRoute } from 'vue-router'
import apis from '@/apis'
import { storage } from '@/utils/storage'
import { deepClone } from '@/utils/deepClone'
// import { useTableDragSort } from './common'
// const { initDragSort, dragEnd } = useTableDragSort()
const route = useRoute()
const tableRef = ref()
const {
  site: {
    classify_list,
    select_classify_list,
    edit_status,
    add_classify,
    update_classify,
    add_subClassify,
    update_subClassify,
    del_classify
  }
} = apis
const columns = ref(column)
const siteId = storage.get('siteId')
const deleteVisible = ref(false)
const categ_id = ref('') //分类删除id
const subcateg_id = ref('') //子类删除id
const level = ref() //区分你是父级还是子级
const formRef = ref()
const subFormRef = ref()
const tableKey = ref() // 这个蛮重要的，让dom刷新
type Key = string
const noEmpty = /^[^ ]+$/
const classFilterList = ref<ICopyList[]>([])
const openRowKeys = ref<string[]>([])
const isOpen = ref(false)
let validateCateName = async (rule: any, value: any, callback: any) => {
  console.log('value: ', value)
  if (!value) {
    return Promise.reject('请输入分类名称')
  } else if (!noEmpty.test(value)) {
    return Promise.reject('分类名称不能包含空格')
  } else {
    return Promise.resolve()
  }
}
//展开收齐所有行
const handleOpenKeys = () => {
  isOpen.value = !isOpen.value
  if (!isOpen.value) return (openRowKeys.value = [])
  openRowKeys.value = statusState.classifyList.map((item: any) => item.id)
}
const expandedRowsChangeFunc = (expandedRows: any) => {
  openRowKeys.value = expandedRows
}
const isCheck = computed(() => (item: ClassifyListData) => {
  const len = item?.subcateg?.length
  return item.level === 1 && len > 0
})
const state = reactive<{ loading: boolean; copyTableData: ClassifyListData[] }>({
  loading: false,
  copyTableData: []
})
interface IAddFormState {
  categ_name: string
  categ_position: number[]
  categ_status: number
  site_id?: string
  categ_id?: string | undefined
  categ_order?: string
}
//新建分类
const addFormState = reactive<IAddFormState>({
  categ_name: '',
  categ_position: [1],
  categ_status: 1,
  categ_order: ''
})
const addFormRules = reactive({
  categ_name: [{ required: true, validator: validateCateName, trigger: 'blur' }],
  categ_position: [{ required: true, message: '请选择展示位置' }],
  categ_order: [{ required: true, message: '请输入序号' }]
})
interface ISubAddFormState {
  categ_id?: string | undefined
  subcateg_name: string | undefined
  subcateg_status: number
  subcateg_id?: string | undefined
  subcateg_order?: string
}
//添加子类
const addSubFormState = reactive<ISubAddFormState>({
  subcateg_id: undefined,
  subcateg_name: '',
  subcateg_status: 1,
  subcateg_order: ''
})
const addSubFormRules = reactive({
  subcateg_id: [{ required: true, message: '请选择所属分类' }],
  subcateg_name: [{ required: true, message: '请输入子类名称，批量添加多个子类使用逗号“,”分隔' }],
  subcateg_order: [{ required: true, message: '请输入序号' }]
})
//分类弹窗关闭事件
const afterCloseEdit = () => {
  formRef.value.resetFields()
}

//子分类弹窗关闭事件
const afterCloseSubEdit = () => {
  subFormRef.value.resetFields() //关闭弹窗清空表单
}
//获取分类接口
const getClassifyList = () => {
  state.loading = true
  classifyState.site_id = siteId
  classify_list(classifyState)
    .then((res: any) => {
      statusState.classifyList =
        res?.categ.map((item: any) => {
          for (var key in item) {
            if (Array.isArray(item[key]) && item[key].length === 0) {
              delete item[key]
            }
          }
          return item
        }) ?? []
      // init()
      console.log(statusState.classifyList, '分类数据')
      statusState.classifyCopyList = JSON.parse(JSON.stringify(statusState.classifyList))
      state.loading = false
      arrayFlagLevel(statusState.classifyList, 1)
      // initSortable()
    })
    .catch(() => {
      state.loading = false
    })
}
//获取筛选分类接口
const getCopyAtlasList = () => {
  select_classify_list({ site_id: siteId }).then((res: any) => {
    classFilterList.value = res?.categ ?? []
  })
}
const onSelectChange = (rowKeys: Key[]) => {
  console.log('selectedRowKeys changed: ', rowKeys)
  statusState.selectedRowKeys = rowKeys
}

const deleteClass = (item: ClassifyListData) => {
  console.log(item, '删除行数据')
  categ_id.value = item.id
  level.value = item.level
  deleteVisible.value = true
  statusState.isEdit = false
}
//添加子类
const addSonClassify = (item: any) => {
  console.log('item: ', item)
  statusState.addSubClassify = true
  statusState.isAddSubClass = true
  statusState.isEdit = false
  addSubFormState.categ_id = item.id
}
//编辑
const updateClass = (item: ClassifyListData) => {
  console.log('item: ', item)
  statusState.isEdit = false
  if (item.level === 1) {
    statusState.addClassify = true
    statusState.isAddClass = false
    const { id, categ_position, status, name, order } = item
    addFormState.categ_id = id
    addFormState.categ_status = status
    addFormState.categ_name = name
    addFormState.categ_position = categ_position
    addFormState.categ_order = order
  } else {
    statusState.addSubClassify = true
    statusState.isAddSubClass = false
    const { id, categ_id, name, status, order } = item
    addSubFormState.categ_id = categ_id
    addSubFormState.subcateg_id = id
    addSubFormState.subcateg_name = name
    addSubFormState.subcateg_status = status
    addSubFormState.subcateg_order = order
  }
}
const editStatus = (checked: number, row: ClassifyListData) => {
  if (statusState.isEdit) return (row.status = checked)
  const data = {
    type: row.level === 1 ? 5 : 6,
    status: checked,
    id: [row.id]
  }
  console.log('data: ', data.id)
  edit_status(data).then(() => {
    message.success(checked === 1 ? '启用成功' : '禁用成功')
    getClassifyList()
  })
}
/**
  删除分类对话框事件
 */
const deleteConfirm = (value: any) => {
  console.log('value: ', value)
  del_classify({ categ_id: [categ_id.value] }).then(() => {
    deleteVisible.value = value
    message.success(level.value === 1 ? '分类删除成功' : '子类删除成功')
    getClassifyList()
  })
}
const deleteCancel = () => {
  deleteVisible.value = false
}
/**
  新建/编辑分类对话框事件
 */
const addConfirm = (value: any) => {
  formRef.value.validate().then(() => {
    console.log(addFormState)
    if (statusState.isAddClass) {
      addFormState.site_id = siteId
      add_classify(addFormState).then(() => {
        message.success('添加分类成功')
        statusState.addClassify = value
        getClassifyList()
      })
    } else {
      update_classify(addFormState).then(() => {
        message.success('编辑分类成功')
        statusState.addClassify = value
        getClassifyList()
      })
    }
  })
}
const addCancel = () => {
  statusState.addClassify = false
}
/**
  添加子类对话框事件
 */
const addSubConfirm = (value: any) => {
  subFormRef.value.validate().then(() => {
    console.log(addSubFormState)
    if (statusState.isAddSubClass) {
      add_subClassify(addSubFormState).then(() => {
        message.success('新增子类成功')
        statusState.addSubClassify = value
        getClassifyList()
      })
    } else {
      const { categ_id, ...params } = addSubFormState
      update_subClassify(params).then(() => {
        message.success('编辑子类成功')
        statusState.addSubClassify = value
        getClassifyList()
      })
    }
  })
}
const addSubCancel = () => {
  statusState.addSubClassify = false
}
//獲取投放位置
const getPosition = computed(() => (arr: any) => {
  if (arr.length <= 0) return '-'
  let arr1 = arr.map((item: any) => {
    return (item = SHOW_POSITION[item])
  })
  return arr1.join(',')
})
watch(
  () => statusState.addSubClassify,
  (val: boolean) => {
    if (!val) return false
    getCopyAtlasList()
  },
  { deep: true }
)
watch(
  () => route.name,
  (val) => {
    statusState.isEdit = false
  },
  { deep: true }
)

//调用排序接口
const sortFunc = (item: any) => {
  update_classify({
    ...item
  }).then(() => {
    message.success('排序成功')
    getClassifyList()
    tableKey.value = Math.random() //狠狠的刷新dom
    // initSortable()
  })
}
//递归给每一级增加一个level
const arrayFlagLevel = (array: any, level: any) => {
  console.log({ array })
  if (!array || !array.length) return
  array.forEach((item: any) => {
    item.level = level
    if (item.subcateg && item.subcateg.length) {
      arrayFlagLevel(item.subcateg, level + 1)
    }
  })
}
// 将树数据转化为平铺数据
const flatTreeData = (treeData: any[], childKey = 'subcateg') => {
  const arr: any[] = []
  const expanded = (data: any) => {
    if (data && data.length > 0) {
      data
        .filter((d: any) => d)
        .forEach((e: any) => {
          arr.push(e)
          expanded(e[childKey] || [])
        })
    }
  }
  expanded(treeData)
  return arr
}
const flatSelectedTableData = ref<any>([])
const selectedTableDataInfo = ref<any>([])
const drawOldIndex = ref<any>(-1)
//初始化表格拖动
const initSortable = () => {
  // 此时找到的元素是要拖拽元素的父容器
  const tbody = document.querySelector('#sortTable  tbody') as HTMLElement
  if (!tbody) return false
  Sortable.create(tbody, {
    // 指定父元素下可被拖拽的子元素
    draggable: '.ant-table-row',
    setData: function (dataTransfer: any) {
      dataTransfer.setData('Text', '')
    },
    onChoose({ oldIndex }: any) {
      // 把树形的结构转为列表再进行拖拽
      flatSelectedTableData.value = flatTreeData(statusState.classifyList)
      drawOldIndex.value = oldIndex
    },
    onMove({ related }: any) {
      const oldRow: any = flatSelectedTableData.value[drawOldIndex.value]
      const newRow: any = flatSelectedTableData.value[related.rowIndex]
      console.log('oldRow: ', oldRow, newRow)
      // if (!newRow || !newRow.id || !oldRow || !oldRow.id) return false;
      // 拖动的是一个包
      if (oldRow.level === 1) {
        if (newRow.level === 1 && oldRow.id === newRow.id) return false
        // 还在自己的包里面
        if (oldRow.categ_id === newRow.categ_id) return false
      } else {
        // 不是包不可以挪到最上面
        if (related.rowIndex === 0) return false
        // 跨包不允许
        if (oldRow.categ_id !== newRow.categ_id || newRow.level === 1) return false
      }
    },
    onEnd({ newIndex, oldIndex }: any) {
      if (oldIndex !== newIndex) {
        const oldRow: any = flatSelectedTableData.value[oldIndex]
        const newRow: any = flatSelectedTableData.value[newIndex]
        console.log('oldRow: ', oldRow, newRow)
        const selectedTableData = deepClone(selectedTableDataInfo.value)
        selectedTableDataInfo.value = []
        const expansionRowKey: any[] = []
        // 拖动的是一个包
        if (oldRow.level === 1) {
          expansionRowKey.push(oldRow.id)
          // 找到拖动的这个包
          const currPackageIndex = selectedTableData.findIndex((p: any) => p.id === oldRow.id)
          // 找到新包的位置塞进去
          // 新位置是一个包的位置 (包 -> 包)
          if (newRow.level === 1) {
            const newPackageIndex = selectedTableData.findIndex((p: any) => p.id === newRow.id)
            const currPackage = selectedTableData.splice(currPackageIndex, 1)[0]
            selectedTableData.splice(newPackageIndex, 0, currPackage)
            expansionRowKey.push(newRow.id)
            // 新位置是一个行的位置 (包 -> 行)
          } else {
            // 找到这个行的父级包
            const newPackageIndex = selectedTableData.findIndex((p: any) => p.categ_id === newRow.categ_id)
            // 删掉原来的包，放到新包的后面
            const currPackage = selectedTableData.splice(currPackageIndex, 1)[0]
            selectedTableData.splice(newPackageIndex, 0, currPackage)
            expansionRowKey.push(selectedTableData[newPackageIndex].id)
          }
          // 拖动的是一个行
        } else {
          // 新目标是一个包 (行 -> 包)
          if (newRow.level === 1) {
            expansionRowKey.push(newRow.id)
            // 如果还是原来的包（包内排序移到开头）
            if (oldRow.categ_id === newRow.categ_id) {
              // 找到当前包位置
              const newPackageIndex = selectedTableData.findIndex((p: any) => p.id === newRow.id)
              const currPackage = selectedTableData[newPackageIndex]
              expansionRowKey.push(currPackage.id)
              const currPackageChildren = currPackage?.subcateg || []
              // 找到拖动的行在subcateg 中的 index
              const currRuleIndex = currPackageChildren.findIndex((rule: any) => rule.ruleTagId === oldRow.ruleTagId)
              const currRule = currPackageChildren.splice(currRuleIndex, 1)[0]
              // 放到最开头
              currPackageChildren.splice(0, 0, currRule)
              currPackage.subcateg = currPackageChildren
              // 替换掉原来的包
              selectedTableData.splice(newPackageIndex, 1, currPackage)
              // 如果在另外一个包开头(废弃，目前不允许，还有问题)
            } else {
              return false
              // 找到旧包
              // const oldPackageIndex = selectedTableData.findIndex((p: any) => p.categ_id === oldRow.categ_id);
              // const oldPackage = selectedTableData[oldPackageIndex];
              // expansionRowKey.push(oldPackage.id);
              // const oldPackageChildren = oldPackage?.subcateg || [];
              // // 删掉旧包中的 old rule
              // const oldRuleIndex = oldPackageChildren.findIndex((rule: any) => rule.ruleTagId === oldRow.ruleTagId);
              // const oldRule = oldPackageChildren.splice(oldRuleIndex, 1)[0];
              // // 找到新包
              // const newPackageIndex = selectedTableData.findIndex((p: any) => p.id === newRow.id);
              // const newPackage = selectedTableData[newPackageIndex];
              // const newPackageChildren = newPackage?.subcateg || [];
              // // 新包中增加 该 rule
              // newPackageChildren.splice(0, 0, oldRule);
              // // 覆盖原包
              // oldPackage.subcateg = oldPackageChildren;
              // newPackage.subcateg = newPackageChildren;
              // selectedTableData.splice(oldPackageIndex, 1, oldPackage);
              // selectedTableData.splice(newPackageIndex, 1, newPackage);
            }
            // 新位置是一个行的位置 (行 -> 行)
          } else {
            // 还在原来的包内（包内排序）
            if (oldRow.categ_id === newRow.categ_id) {
              // 找到当前包位置
              const newPackageIndex = selectedTableData.findIndex((p: any) => p.categ_id === newRow.categ_id)
              const currPackage = selectedTableData[newPackageIndex]
              expansionRowKey.push(currPackage.id)
              const currPackageChildren = currPackage?.subcateg || []
              // 找到拖动的行在subcateg 中的 index
              const oldRuleIndex = currPackageChildren.findIndex((rule: any) => rule.ruleTagId === oldRow.ruleTagId)
              // 找到将要排序到的目标位置
              const newRuleIndex = currPackageChildren.findIndex((rule: any) => rule.ruleTagId === newRow.ruleTagId)
              // 排序
              const oldRule = currPackageChildren.splice(oldRuleIndex, 1)[0]
              currPackageChildren.splice(newRuleIndex, 0, oldRule)
              currPackage.subcateg = currPackageChildren
              // 替换掉原来的包
              selectedTableData.splice(newPackageIndex, 1, currPackage)
              // 在另外一个包内(废弃，目前不允许，还有问题)
            } else {
              return false
              // 找到旧包
              // const oldPackageIndex = selectedTableData.findIndex((p: any) => p.categ_id === oldRow.categ_id);
              // const oldPackage = selectedTableData[oldPackageIndex];
              // expansionRowKey.push(oldPackage.id);
              // const oldPackageChildren = oldPackage?.subcateg || [];
              // // 删掉旧包中的 old rule
              // const oldRuleIndex = oldPackageChildren.findIndex((rule: any) => rule.ruleTagId === oldRow.ruleTagId);
              // // 找到新包
              // const newPackageIndex = selectedTableData.findIndex((p: any) => p.categ_id === newRow.categ_id);
              // const newPackage = selectedTableData[newPackageIndex];
              // expansionRowKey.push(newPackage.id);
              // const newPackageChildren = newPackage?.subcateg || [];
              // // 找到 newRule 在 新包中的 index
              // const newRuleIndex = newPackageChildren.findIndex((rule: any) => rule.ruleTagId === newRow.ruleTagId);
              // const oldRule = oldPackageChildren.splice(oldRuleIndex, 1)[0];
              // // 新包中增加 该 rule
              // newPackageChildren.splice(newRuleIndex, 0, oldRule);
              // // 覆盖原包
              // oldPackage.subcateg = oldPackageChildren;
              // newPackage.subcateg = newPackageChildren;
              // selectedTableData.splice(oldPackageIndex, 1, oldPackage);
              // selectedTableData.splice(newPackageIndex, 1, newPackage);
            }
          }
        }
        nextTick(() => {
          selectedTableDataInfo.value = selectedTableData
          nextTick(() => {
            selectedTableDataInfo.value.forEach((item: any) => {
              if (expansionRowKey.includes(item.id)) {
                ;(tableRef.value as any).toggleRowExpansion(item, true)
              }
            })
          })
        })
      }
      tableKey.value++
    }
  })
}

onMounted(() => {
  getClassifyList()
  // initSortable()
})
</script>
<style lang="less" scoped>
@basicColor: #0083ff;
:deep(.ant-table-tbody) {
  position: relative;
}
:deep(.childBg) {
  background-color: #fafafa;
}

// :deep(.ant-table-cell-fix-right) {
//   background: transparent;
// }

:deep(.ant-form-item-label) {
  width: 80px;
  text-align: right;
}

:deep(.ant-form-item-label > label::after) {
  content: '';
}

.page-classifyList {
  padding-top: 6px;
  box-sizing: border-box;

  :deep(.ant-table-thead > tr > th) {
    color: #262626;
    font-weight: 500;
  }

  :deep(
      .ant-table-thead
        > tr
        > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not(
          [colspan]
        )::before
    ) {
    width: 0;
  }

  .ant-table-row {
    cursor: pointer;
  }

  :deep(.ant-table-cell .ant-table-cell-with-append) {
    display: flex;
    align-items: center;
  }

  :deep(.ellipsis-text) {
    max-width: 154px !important;
    white-space: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .basicColor {
    color: @basicColor;
  }
}
</style>
